<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDoList</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        body {
            background-color: #cdcdcd;
        }

        header {
            height: 50px;
            background: rgba(47, 47, 47, 0.98);
        }

        section {
            width: 600px;
            margin: 0 auto;
        }

        header section {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
        }

        header section p {
            color: #DDD;
            font-size: 24px;
            cursor: pointer;
        }

        header section input {
            width: 50%;
            text-indent: 10px;
            border-radius: 5px;
            box-shadow: 0 1px 0 rgb(255 255 255 / 24%), 0 1px 6px rgb(0 0 0 / 45%) inset;
            border: none;
            outline: none;
            padding: 5px 10px;
        }

        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .title h2 {
            margin: 20px 0;
        }

        .title span {
            padding: 0 5px;
            height: 20px;
            border-radius: 20px;
            background: #E6E6FA;
            line-height: 22px;
            text-align: center;
            color: #666;
            font-size: 14px;
        }

        .list li {
            height: 32px;
            display: flex;
            align-items: center;
            background-color: #fff;
            border-left: 5px solid #629A9C;
            border-radius: 3px;
            margin-bottom: 10px;
        }

        .list input {
            width: 22px;
            height: 22px;
            margin-left: 20px;
            margin-right: 15px;
            cursor: pointer;
        }

        .list p {
            flex: 1;
        }

        .list a {
            width: 12px;
            height: 12px;
            border-radius: 12px;
            border: 6px double #FFF;
            margin-right: 10px;
            background: #CCC;
            line-height: 14px;
            text-align: center;
            color: #FFF;
            font-weight: bold;
            font-size: 14px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <header>
        <section>
            <p>ToDoList</p>
            <input type="text" placeholder="添加ToDo" id="add">
        </section>
    </header>

    <main>
        <section>
            <!-- 正在进行的列表 -->
            <div class="doList">
                <div class="title">
                    <h2>正在进行</h2>
                    <span class="todoCount">0</span>
                </div>

                <ul class="list"></ul>
            </div>

            <!-- 已完成的列表 -->
            <div class="doneList">
                <div class="title">
                    <h2>已完成</h2>
                    <span class="doneCount">0</span>
                </div>

                <ul class="list"></ul>
            </div>
        </section>
    </main>

    <script>
        //  1.  回车后添加用户输入项
        //      - 怎么判断是回车
        //      - 怎么获取用户的值
        //  2.  将输入值添加到“正在进行“列表中
        //      - 应该用什么来表示 “正在进行” 的列表
        //      - 如何将 “正在进行” 列表中的数据渲染到页面上
        //  3.  勾选这个任务后，变成已完成
        //      - 怎么监听复选框
        //      - 怎么判断复选框是被选中还是没有被选中
        //      - 应该用什么来表示 “已完成” 的列表
        //      - 怎么将 “正在进行” 变成 “已完成”，反过来也是
        //  4.  点击删除后，任务选项被移除
        //      - 如何监听删除按钮
        //      - 如何确定要删除的是哪一行
        //  5.  列表个数的更新
        //      - 如何获取任务的个数
        //      - 什么时候去更新列表的个数

        let add = document.querySelector("#add")
        let toDoCount = document.querySelector(".todoCount")
        let doneCount = document.querySelector(".doneCount")
        let doList = document.querySelector(".doList .list")
        let doneList = document.querySelector(".doneList .list")

        //  对 input 框进行监听
        add.addEventListener("keydown", function (e) {
            //  如果不是回车键，直接中断该函数
            if (e.keyCode !== 13) return

            let value = add.value

            //  因为todoList的增加、删除，都是和当前li行有关，所以需要将li单独抽离出来进行处理
            let li = document.createElement("li")
            li.innerHTML += `
                        <input type="checkbox">
                        <p>${value}</p>
                        <a href="#"></a>`
            //  由于 li 是孤儿节点，所以需要将它添加到 “正在进行” 列表中
            doList.appendChild(li)

            //  由于复选框和删除按钮，都是在 li 标签内的，如果对每个复选框和删除按钮单独进行事件绑定的操作，会消耗一定的性能
            //  此时可以通过事件委托，将复选框的点击事件和删除按钮的点击事件委托给父元素 li 标签
            li.addEventListener("click", function (e) {
                let tagName = e.target.nodeName.toLowerCase()

                if (tagName === 'input') {
                    //  当标签名等于 input 时，代表用户对复选框进行了点击

                    //  当复选框被选中时，代表该任务需要从 “正在进行” 移动到 “已完成” 列表
                    //  当对一个已存在的节点使用 appendChild 时，实际上触发的是交换位置的操作
                    // if (e.target.checked) {
                    //     doneList.appendChild(li)
                    // } else {
                    //     doList.appendChild(li)
                    // }

                    e.target.checked ? doneList.appendChild(li) : doList.appendChild(li)
                } else if (tagName === 'a') {
                    //  当标签名等于 a 时，代表要执行删除操作
                    li.remove()
                }

                //  更新个数
                updateCount()
            })

            //  更新个数
            updateCount()

            //  清空输入框的内容
            add.value = null
        })

        //  更新任务列表个数的封装函数
        function updateCount() {
            toDoCount.innerText = doList.children.length
            doneCount.innerText = doneList.children.length
        }
    </script>
</body>

</html>